<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>对账单</title>
		<link rel="stylesheet" href="<c:url value="/static/wx/css/style.css"/>" />
		<link rel="stylesheet" href="<c:url value="/static/wx/css/LCalendar.css"/>" />
		<script type="text/javascript" src="<c:url value="/static/wx/js/lib/rem.js"/>"></script>
	</head>
	<body class="befeff4">
		<div id="wrap" class="wrap_statement">
			<!--回收类别弹窗开始-->
			<div class="mask" id="mask_category">
				<div class="confirm" id="wrap_category" title="wrap_category">
					<ul class="confirm_c common">
						<li id="">全部</li>
						<li id="1">支出</li>
						<li id="2">收入</li>
					</ul>
				</div>
			</div>
	
			<div class="start_date_right"></div>
	
			<!--回收类别弹窗结束-->
			<div class="header_s">
				<div id="wrapCategorySelect">
					<span>全部</span>
				</div>
				<div id="wrapDateSelect">
					<span> 
					    <input type="text" name="start_date" id="start_date" value="2018年11月" readonly="readonly" />
					</span>
				</div>
			</div>
	
			<div class='balanceDetail_wrap'>
				<div class='month_h common'>
					<span class='fl left_text' id="month">本月</span> 
					<span class='fr right_text' id="amount"></span>
				</div>
	
	           <div id="tr_list"></div>
				
			</div>
		</div>
	
	    <input type="hidden" id="userId" value="${userId}"/>
		<script type="text/javascript" src="<c:url value="/static/wx/js/lib/jquery-3.3.1.min.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/static/wx/js/lib/LCalendar.js"/>"></script>
		<script type="text/javascript">
	            var tranType = "";////收入支出1支出 2 收入
	            var userId = $("#userId").val();
	            $(document).ready(function(){
	            	 ajaxHtml(tranType,dateTime);
	                 tranSum(tranType,dateTime);
	                    
	                //收入支出弹窗显示
	                $("#wrapCategorySelect").on("click",function(){
	                    $("#mask_category").show();
	                })
	                //点击蒙版关闭弹层
	                $(".mask").on("click",function(){
	                    $(this).hide();
	                })
	                //阻止事件冒泡
	                $(".confirm").on("click",function(e){
	                    var ev = e || event;
	                    ev.stopPropagation();
	                    return false;
	                })
	                
	                //底部弹窗列表选择
	                 $("#mask_category .confirm_c").on("click","li",function(){
	                    text_ = $(this).text();
	                    tranType = $(this).attr("id");
	                    console.log("id_",tranType);
	                    console.log(text_);
	                    $("#wrapCategorySelect span").text(text_);
	                    $(this).addClass("on").siblings("li").removeClass("on");
	                    ajaxHtml(tranType,dateTime);//数据请求
	                    tranSum(tranType,dateTime);
	                    $("#mask_category").hide();
	                })
	                
	                //日期选择插件
	                var calendar = new LCalendar();
	                    calendar.init({
	                        'trigger': '#start_date', //标签id
	                        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
	                        'minDate': (new Date().getFullYear()) + '-' + 1 + '-' + 1, //最小日期
	                        'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
	                });
	            })
	            
	            function ajaxHtml(tranType,dateTime){
	                $.ajax({
                        type: "post",
                        url: "<c:url value="/wx/toTranList.do"/>",
                        data:{
                        	tranType : tranType,
                        	dateTime : dateTime,
                        	userId : userId,
                        	page : 1,
                        	size : 10,
                        },
                        cache: true,
                        async:false, 
                        dataType: "json",
                        success: function(data){
                             var result = "";
                             if (data.transactionVo.length>0) {
                            	 for (var i = 0 ; i<data.transactionVo.length;i++) {
                            		 result += "<div class='section-list'>";
                            		 result += "<div class='common boder-bottom'>";
                                     result += "<div class='top_text clearfix'>";
                                     result += "<span class='fl'>收取回收金</span> ";
                                     result += "<span class='c41afa5 fr'>";
                                     if (data.transactionVo[i].tranType == 1) {
                                    	 result += "-"+data.transactionVo[i].price +"元";
                                     }else {
                                    	 result += "+"+data.transactionVo[i].price +"元";
                                     }
                                     result += "</span>>";
                                     result += "</div>";
                                     result += "<div class='bottom_text clearfix'>";
                                     result += "<span class='fl'>"+data.transactionVo[i].createTime.substring(0, 16)+"</span>";
                                     //支付通道 1 微信 2 支付宝 3 线下 4 余额 
                                     if (data.transactionVo[i].channelPayflag == 1) {
                                         result += "<span class='fr'>微信</span>";
                                     }else if (data.transactionVo[i].channelPayflag == 2) {
                                         result += "<span class='fr'>支付宝</span>";
                                     }else if (data.transactionVo[i].channelPayflag == 3) {
                                    	 result += "<span class='fr'>线下支付</span>";
                                     }else if (data.transactionVo[i].channelPayflag == 4) {
                                    	 result += "<span class='fr'>余额支付</span>";
                                     }
                                     result += "</div>";
                                     result += "</div>";
                                     result += "</div>";
                                     result += "</div>";
                            	 }
                             }
                             $("#tr_list").html(result);
                        }
	                })
	            }
	            
	            function tranSum(tranType,dateTime){
	            	$.ajax({
                        type: "post",
                        url: "<c:url value="/wx/toTranSumCount.do"/>",
                        data:{
                            tranType : tranType,
                            dateTime : dateTime,
                            userId : userId,
                        },
                        cache: true,
                        async:false, 
                        dataType: "json",
                        success: function(data){
                        	if (data.transactionVo.expenditure == null ) {
                        		data.transactionVo.expenditure = 0;
                        	}
                        	if (data.transactionVo.income == null) {
                        		data.transactionVo.income = 0;
                        	}
                        	if (tranType == 1) {
                        		//支出
                        		$("#amount").html("支出："+data.transactionVo.expenditure+"元");
                        	}else if (tranType == 2) {
                                //收入
                        		$("#amount").html("收入："+data.transactionVo.income+"元");
                            }else {
                            	//全部
                            	$("#amount").html("收入："+data.transactionVo.income +"元；"+ "支出："+data.transactionVo.expenditure);
                            }
                        }
	            	})
	            }
	        </script>
	</body>
</html>